/**
 * Home Screen
 *
 * @format
 * @flow
 */

import React from 'react';
import { View, Text , TouchableOpacity, StyleSheet} from 'react-native';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home Screen",
  }

  render() {
    const navigation = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text>Home Screen</Text>

        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.push('DetailScreen')}>
          <Text style={{color: 'black'}}>Go to Details</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.navigate('CustomNavScreen', {title: '标题', name: '张三', age: 18})}>
          <Text style={{color: 'black'}}>显示修饰过后的nav</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.navigate('StorageScreen')}>
          <Text style={{color: 'black'}}>Go to StorageScreen</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => navigation.navigate('MineScreen')}>
          <Text style={{color: 'black'}}>
            切换到 MineScreen
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  button: {
    marginTop: 30,
    padding: 5,
    borderWidth: 1,
    borderRadius: 5,
    borderColor: 'orange',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

export default HomeScreen;